<template>
	<view class="container">
		<view class="test-title">{{curNum}}/{{totalNum}}</view>
		
		<view class="question-slide-box" @touchstart="slideStart" @touchend="slideEnd">
			<view class="question-list" :animation="animationData">
				<view class="question-box" v-for="(question,i) in questionList" :key="question.intentionTestQuestionId">
					<view class="question-title">{{question.intentionTestQuestionTitle}}</view>
					<view class="answer-box">
						<view class="answer-item" @tap="tapItem(i,j)" v-for="(answer,j) in question.answerList" :key="answer.intentionTestAnswerId">
							<view class="answer-img">
								<image src="../../static/images/no_check.png" v-if="answer.intentionTestAnswerIsChecked == 0"></image>
								<image src="../../static/images/correct.png" v-if="answer.intentionTestAnswerIsChecked == 1"></image>
							</view>
							<view class="answer-label">{{answer.intentionTestAnswerContent}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="next-box" @tap="next">
			<image src="../../static/images/next.png"></image>
		</view>
	</view>
</template>

<script>
	import { myRequest, showToastMsg } from '../../utils'
	
	export default {
		data() {
			return {
				loading: false,
				startData: {
					clientX: 0
				},
				num: 0,
				count: 0,
				animation: {},
				animationData: {},
				selectIndex: -1,
				totalNum: 1,
				curNum: 1,
				questionList: [],
				questionIndex: -1,
				answerIndex: -1,
				formData: {
					questionIds: '',
					answerIds: ''
				},
				questionIds: [],
				answerIds: [],
				matchType: 0
			}
		},
		
		onLoad(options) {
			this.matchType = options.t
			
			this.animation = uni.createAnimation({
				duration: 200,
			  timingFunction: 'ease',
			})
			
			this.fetchData()
		},
		
		methods: {
			
			fetchData() {
				const that = this
				
				let success = function(res) {
					
					uni.hideLoading()
					if (res.data.code != 20000) {
						return showToastMsg(res.data.message)
					}
					
					that.questionList = res.data.data
					that.totalNum = res.data.data.length
					
					for (let i = 0; i < res.data.data.length; i++) {
						that.questionIds.push(res.data.data[i].intentionTestQuestionId)
					}
					
				}
				
				let param = {
					url: '/intention-test/list',
					data: {}
				}
				
				uni.showLoading({
					title: '正在加载'
				})
				myRequest(param, success)
			},
			
			tapItem(i, j) {
				if (this.questionIndex == i) {
					this.questionList[this.questionIndex].answerList[this.answerIndex].intentionTestAnswerIsChecked = 0
				}
				this.questionIndex = i
				this.answerIndex = j
				this.questionList[i].answerList[j].intentionTestAnswerIsChecked = 1
			},
			
			slideStart(e) {
				this.startData.clientX = e.changedTouches[0].clientX			 
			},
			
			slideEnd(e) {
				const subX = e.changedTouches[0].clientX - this.startData.clientX
				if (subX > 100 && this.count > 0) { // 右滑
					this.num += 340
					this.count--
					this.curNum--
				} else if (subX < -100 && this.count < this.questionList.length - 1) { // 左滑
					this.num -= 340
					this.count++
					this.curNum++
				}
				this.animation.translateX(this.num).step()
				this.animationData = this.animation.export()
			},
			
			next() {
				if (this.count < this.questionList.length - 1) {
					this.num -= 340
					this.count++
					this.curNum++
					this.animation.translateX(this.num).step()
					this.animationData = this.animation.export()
				} else {
					this.doSubmit()
				}
			},
			
			doSubmit() {
				
				const that = this
				
				that.answerIds = []
				for (let i = 0; i < that.questionList.length; i++) {
					for (let j = 0; j < that.questionList[i].answerList.length; j++) {
						if (that.questionList[i].answerList[j].intentionTestAnswerIsChecked == 1) {
							that.answerIds.push(that.questionList[i].answerList[j].intentionTestAnswerId)
							break
						}
					}
				}
				if (that.answerIds.length < that.questionIds.length) {
					return showToastMsg('请将测试题做完')
				}
				if (that.loading) {
					return
				}
				that.formData.questionIds = that.questionIds.join(',')
				that.formData.answerIds = that.answerIds.join(',')
				
				that.loading = true
				uni.showLoading({
					title: '正在提交'
				})
				
				let success = function(res) {
					
					uni.hideLoading()
					if (res.data.code != 20000) {
						return showToastMsg(res.data.message)
					}
					
					uni.navigateTo({
						url: '/pages/input_result_major/input_result_major?t=' + that.matchType
					})
					
				}
				
				let param = {
					url: '/intention-test/save',
					data: that.formData
				}
				
				myRequest(param, success)
				
			}
			
		}
	}
</script>

<style>
	page {
		background-color: #f7f9fe;
	}
	
	.container {
		width: 750rpx;
		height: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.test-title {
		font-size: 32rpx;
		color: #333333;
		margin-top: 40rpx;
	}
	
	.question-box {
		min-width: 680rpx;
		height: auto;
		background-color: #ffffff;
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.question-title {
		width: 600rpx;
		font-size: 32rpx;
		margin-top: 40rpx;
		font-weight: bold;
	}
	
	.answer-box {
		width: 540rpx;
		margin-top: 40rpx;
		margin-bottom: 50rpx;
	}
	
	.answer-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 90rpx;
	}
	
	.answer-label {
		margin-left: 40rpx;
		font-size: 30rpx;
	}
	
	.answer-img {
		margin-top: 14rpx;
	}
	
	.answer-img image {
		width: 56rpx;
		height: 56rpx;
	}
	
	.next-box {
		margin-top: 60rpx;
	}
	
	.next-box image {
		width: 130rpx;
		height: 130rpx;
	}
	
	.question-slide-box {
		width: 680rpx;
		height: auto;
		overflow: hidden;
		margin-top: 40rpx;
	}
	
	.question-list {
		width: auto;
		display: flex;
		flex-direction: row;
	}
</style>
